<style lang='less' scoped>
.login_data{
    background: white;
    width: 20vw;
    height: 37vh;
    position:relative;
    .login_title{
        position: absolute;
        text-align:center;
        font-size: 1.5vw;
        top: 5vh;
        width: 20vw;
    }
    .userdata{
        position: absolute;
        width: 16vw;
        top:8vh;
        left: 2vw;
    }
    .username{
        width: 16vw;
        margin-top: 2vh;
    }
    .password{
        margin-top: 2vh;
        width: 16vw;
    }
    .btlogin{
        cursor:pointer;
        position: absolute;
        border:none;
        width: 6vw;
        text-align:center;
        top:25vh;
        left: 2vw;
        background: #DEDEDC;
        color: black;
        font-size: 16px;
    }
    .jiantou{
        cursor:pointer;
        position: absolute;
        background-image: url(../../../images/jiantou.jpg);
        background-size:100% 100%;
        width: 1.5vw;
        height: 1.5vw;
        top:32vh;
        left:3vw;
    }
    .lijizhuce{
        cursor:pointer;
        position: absolute;
        top:32vh;
        height: 2vw;
        left:5vw;
        font-size: 1vw;
        color: #858382;
    }
    .kunchong{
        position: absolute;
        background-image: url(../../../images/kunchong.gif);
        background-size:100% 100%;
        width:4vh;
        height:4vh;
        top:25vh;
        left:12vw;
    }
    .el-form-item {
        margin-bottom: 0.5vw;
    }
}
</style>
<template>
    <div class="login_data">
        <div class="login_title">账号登录</div>
        <el-form :model="loginForm" ref="loginForm" class="userdata" :rules="rules">
            <el-form-item
                prop="username"
                >
                <el-input class="username" type="username"  placeholder="vip设计师账号"  v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item
                prop="password"
                >
                <el-input class="password" type="password"  placeholder="请输入密码"  v-model="loginForm.password"></el-input>
            </el-form-item>
        </el-form>
        <el-button class="btlogin" size="medium" round @click="Btlogin">登录</el-button>
        <div class="jiantou" @click="downzhuce"></div>
        <div class="lijizhuce" @click="downzhuce">立即注册</div>
        <div class="kunchong"></div>
    </div>
</template>
<script>
import { loginpassword } from '@/request/api';
export default {
    data() {
        return {
            loginForm:{username:'',password:''},
            rules: {
                username: [
                    { required: true, message: '请输入用户账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],

            }
        };
    },
    methods: {
        Btlogin(){
            
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    loginpassword({
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    }).then(res => {
                        if(res.ok){
                            console.log(res);
                            localStorage.setItem('token', res.data.token);
                            this.$emit('denglu');
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        downzhuce(){
            this.$emit('zhuce',"2");
        }
    },

};
</script>
